<template>
  <div class="menu_box">
    <Menu theme="dark" :accordion="true">
      <MenuItem :name="-1" :key="-1" @click.native="toPath('/home')">首页</MenuItem>
      <Submenu v-for="(item, index) in categoryList" :key="index" :name="index">
        <template v-show="item.child != null" slot="title">{{ item.name }}</template>
        <MenuItem v-show="item.child != null" v-for="(_item, _index) in item.child" :key="_index"
                  :name="index + '-' + _index" @click.native="toPath(_item.path)">{{ _item.name }}
        </MenuItem>
      </Submenu>
    </Menu>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  computed: {
    ...mapState({
      categoryList: (state) => {
        return state.home.categoryList.menuList
      }
    })
  },
  mounted() {
    this._getLevelMenuInfo()
  },
  methods: {
    // 路由跳转
    toPath(_path) {
      this.$router.push(_path)
    },
    _getLevelMenuInfo() {
      this.$store.dispatch('getCategoryList', this.$store.state.userModule.user.username)
    }
  }
}
</script>

<style>
.menu_box {
  height: 90vh;
  background-color: #495163;
}
</style>